<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"
    ></script>
    <script type="text/javascript">
      var dom = document.getElementById('container')
      var myChart = echarts.init(dom)
      var app = {}

      var option

      const geoJson = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              adcode: 110105,
              name: '朝阳区',
              center: [116.486409, 39.921489],
              centroid: [116.513687, 39.951064],
              childrenNum: 0,
              level: 'district',
              acroutes: [100000, 110000],
              parent: { adcode: 110000 },
            },
            geometry: {
              type: 'MultiPolygon',
              coordinates: [
                [
                  '@@FAFCDAD@TAF@D@DANGEGNGJFBAFEDC@ABE@C@AG@AC@AKA@ABELB@CBAAA@CBGBG@KBI@KBCBC@EA@GFCBKBAC@CAA@@DEBC@C@@E@A@BA@AAK@@GBA@@CDGHIA@IBGBBAA@BC@AC@@AB@D@@E@CA@@@A@BG@@CABA@@D@@AC@BCDA@@AACG@AEAG@@ABAB@@IB@V@B@@A@GBE@AI@@G@AIOBAD@BCFGAAD@ECCCIGGEG@K@BGF@@@KKAKBEE@@C@GAA@BMB@A@CEBI@BBFF@@SAAFGD@FEA@AC@SBM@E@EDCA@A@AAEAAEDE@ABC@@AHCDAACE@@CE@@DK@AB@DQ@@BC@AEE@@CBA@AA@@C@@CAKCD@BA@@E@@AGAABCA@FC@@BAB@CE@@C@@G@AGQE@@C@IHABIAADABEDIH@A@@ABQC@@AD@@BD@BBBBA@BABCBABACG@@B@DM@@BI@@BL@B@@DB@@FB@@@B@@BB@BBA@@BBB@@@AB@BA@@D@@DB@@@@DD@@@A@@AB@@DF@AHH@@BB@@@@BB@@@@BA@@BF@@AB@DA@@@BB@BC@AD@@B@@BDB@BA@B@@@BD@@BD@BFABE@@AA@CD@BA@@A@@GF@AAAABA@ABCB@BEB@AA@@CCD@DA@@BA@@D@B@B@BD@@DA@@FDD@DAJALD@@BB@B@BAB@B@@DD@@BC@@BG@@F@@@FA@@BF@@DE@C@C@C@C@CA@D@D@LAD@H@HAND@@@B@@B@@BAB@@@@BBB@CH@@J@HBB@F@BDB@@BDAB@@E@@@A@AAA@@BBB@FC@@DI@BA@@@AB@@@C@AA@BA@G@@B@@B@@BA@@D@B@@@B@@@DB@@A@@@FI@@F@@U@@BC@@DA@ALC@@BB@@DC@@E@A@E@A@GC@@AC@ABA@A@@@A@C@ABO@@CCABD@B@@@@B@@B@DB@@DD@@@BBB@@@@HY@@D@DAFEV@DA@ILEJGLEFGJMTB@LBNBLBB@LBB@FBT@FBB@ADCB@@A@AB@D@@@B@@BB@BD@BC@ABCHBB@JBFDBFA@@BA@@DAFF@AFDB@DFBF@@@B@JDBBB@TFD@@@F@@AJ@@@D@BADAD@D@@DDBB@@AB@@@B@B@@@@AB@B@BB@DB@@BA@@@BB@B@BB@ABA@@B@BCB@JFBB@ADBB@@ABDBDBB@AD@@DB@@@B@D@DF@BA@CDCD@JAFA@@@AB@B@BABAP@H@B@DADCDCBADCFCD@B@B@F@DBF@F@DADAB@DCDADCBCBAHCBAHHBBBA@CBCBBDAAAA@@ADCCC@A@@IC@A@@BABCDADALCHADCDABABCDCBAD@DCFAB@GFA@J@BECCdU',
                ],
                [
                  '@@GA@@A@@@A@BC@AFCE@BI@ACBE@ABC@C@@B@@@FBA@@@DA@@@A@A@A@@@@BDAD@@HCCA@BDBD@B@BAHA@A@B@@B@DCXIA@A@@@E@@@CA@@DA@@FA@ARAD@B@FAD@HAF@@@HAF@DB@AFD@@EB@@AB@@AB@D]XBB@@BF@@B@@@DF@ALB@@DAB@B@BDIB@@ID@BKB@@A@AC@FYB@@AA@@G@@BOB@@@@@@KB@ACA@@AA@@BC@',
                ],
              ],
              encodeOffsets: [[[119394, 40978]], [[119403, 41015]]],
            },
          },
        ],
        UTF8Encoding: true,
        UTF8Scale: 1024,
      }

      myChart.showLoading()

      myChart.hideLoading()

      echarts.registerMap('HK', geoJson)

      myChart.setOption(
        (option = {
          title: {
            text: 'Echart Geo View',
            subtext: '-----------------------',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)',
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {},
            },
          },

          series: [
            {
              name: 'Geo View',
              type: 'map',
              mapType: 'HK', // 自定义扩展图表类型
              label: {
                show: true,
              },
            },
          ],
        })
      )

      if (option && typeof option === 'object') {
        myChart.setOption(option)
      }
    </script>
  </body>
</html>
